<template>
  <el-form :model="form" label-width="120px">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
    
      <el-col :span="8">
        <el-form-item label="老人照片">
          <el-upload
            action="api/employee/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            v-model="form.icon"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
   
      <el-col :span="8">
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择老人生日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身份证号">
          <el-input v-model="form.identity"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系电话">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="现住地址">
          <el-cascader
            placeholder="请选择"
            v-model="form.currentAddress"
            :options="addressOptions"
            clearable
            filterable
            @change="handleAddressChange"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="详细地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学历">
          <el-select v-model="form.education" placeholder="请选择">
            <el-option label="小学" value="0"></el-option>
            <el-option label="初中" value="1"></el-option>
            <el-option label="高中" value="2"></el-option>
            <el-option label="中专" value="3"></el-option>
            <el-option label="大专" value="4"></el-option>
            <el-option label="本科及以上" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="民族">
          <el-select v-model="form.nationid" placeholder="请选择">
            <el-option
              v-for="nation in nations"
              :key="nation.id"
              :label="nation.name"
              :value="nation.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="籍贯">
          <el-input v-model="form.nativeplace"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="婚姻状况">
          <el-select v-model="form.maritalstatus" placeholder="请选择">
            <el-option label="未婚" value="0"></el-option>
            <el-option label="已婚" value="1"></el-option>
            <el-option label="离异" value="2"></el-option>
            <el-option label="丧偶" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="社保类型">
          <el-select v-model="form.socialStatus" placeholder="请选择">
            <el-option label="职工" value="0"></el-option>
            <el-option label="居民" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="社保卡号">
          <el-input v-model="form.socialCard"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="经济来源">
          <el-select v-model="form.economicSources" placeholder="请选择">
            <el-option label="退休金" value="0"></el-option>
            <el-option label="子女补贴" value="1"></el-option>
            <el-option label="国家惠普型补贴" value="2"></el-option>
            <el-option label="个人储蓄" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
    <el-col :span="8">
        <el-form-item label="付费方式">
          <el-select v-model="form.payStatus" placeholder="请选择">
            <el-option label="自费" value="0"></el-option>
            <el-option label="城乡职工医疗险" value="1"></el-option>
            <el-option label="城乡居民医疗险" value="2"></el-option>
            <el-option label="公费医疗照顾对象" value="3"></el-option>
            <el-option label="公务员补助" value="4"></el-option>
            <el-option label="其他" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">   
      <div class="urgent-message">
      <el-icon class="info-icon" name="info"></el-icon>
      <span class="message-text">紧急联系人至少维护1人及以上</span>
    </div>
    </el-row>
  
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="紧急联系人1">
          <el-input v-model="form.emergencyContact"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="紧急联系电话1">
          <el-input v-model="form.emergencyTel"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="紧急联系人2">
          <el-input v-model="form.emergencyContact2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="紧急联系电话2">
          <el-input v-model="form.emergencyTel2"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <div>
    <el-button type="primary" @click="back">返回</el-button>
    </div>
      <div class="right-align">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>
  
  <script>
export default {
  data() {
    return {
      imageUrl: "",
      form: {  
        name: "",
        icon: "",
        gender: 1,
        age: "",
        birthday: "",
        identity:"",
        tel: "",
        currentAddress: [],
        address: "",
        education: "",
        nationid: "",
        nativeplace: "",
        maritalstatus: "",
        socialStatus: "",
        socialCard: "",
        economicSources: "",
        payStatus: "",
        emergencyContact: "",
        emergencyContact2: "",
        emergencyTel: "",
        emergencyTel2: "",
      },
      nations: [],
      addressOptions: [
        {
          value: "省份ID",
          label: "省份名称",
          children: [
            {
              value: "城市ID",
              label: "城市名称",
              children: [
                {
                  value: "县区ID",
                  label: "县区名称",
                },
                // 更多县区...
              ],
            },
            // 更多城市...
          ],
        },
        // 更多省份...
      ],
    };
  },
  methods: {
    back(){
      this.$router.push({ path: "/userArc" });
    },
    submitForm() {
      this.form.icon = this.imageUrl;
      let user = this.form;
      const currentAddress = this.form.currentAddress;
    const currentAddressStr = currentAddress.join(', ');
    this.form.currentAddress=currentAddressStr
      this.$axios.post("api/userArc/addUser", user).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功!");
          this.$router.push({ path: "/userArc" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    queryNation() {
      this.$axios.get("api/nation/queryNation").then((res) => {
        if (res.data.code == 200) {
          this.nations = res.data.data;
        }
      });
    },

    getLocations() {
      this.$axios.get("api/location/queryLocation").then((response) => {
        function removeChildrenForCounties(options) {
          for (const option of options) {
            if (option.children) {
              // 如果children是一个空数组，删除它
              if (option.children.length === 0) {
                delete option.children;
              }
              // 否则，递归处理下一级的选项
              else {
                removeChildrenForCounties(option.children);
              }
            }
          }
        }

        this.addressOptions = response.data.data;
        removeChildrenForCounties(this.addressOptions);
      });
    },
    handleAddressChange(value) {
      this.form.currentAddress = value;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
  },
  created() {
    this.getLocations();
    this.queryNation();
  },
};
</script>
  
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.avatar {
  width: 120px; /* 调整为你需要的宽度 */
  height: 120px; /* 调整为你需要的高度 */
  object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
}
.urgent-message {
  background-color: #cfe8ff; /* 淡蓝色背景 */
  color: #1890ff; /* 蓝色字体颜色 */
  padding: 10px;
  border: 1px solid #91d5ff; /* 淡蓝色边框 */
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.info-icon {
  color: #1890ff; /* 蓝色图标颜色 */
  margin-right: 10px;
}

.message-text {
  font-weight: bold; /* 加粗字体 */
}

.right-align {
  text-align: right; /* 将内容右对齐 */
}
</style>